<!DOCTYPE html>
<html>
<title>Test video tag with only audio does looks like audio tag when controls disabled</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video preload=metadata>
  <source src="../content/test.oga" />
</video>
<script>
async_test(t => {
  const video = document.querySelector('video');

  video.addEventListener('loadedmetadata', t.step_func_done(() => {
    assert_false(looksLikeAudio(), 'Should not initially look like audio tag with no controls');
    video.controls = true;
    assert_true(looksLikeAudio(), 'Should look like audio tag when controls added');
    video.controls = false;
    assert_false(looksLikeAudio(), 'Should stop looking like audio tag when controls removed');
  }));

  function looksLikeAudio() {
    return mediaControls(video).classList.contains('audio-only');
  }
});
</script>
</html>
